<template>
  <basic-container>
    <div>
      <m-s-search @searchClick="v=>{queryForm=v,getList()}" :list="notificationTemplateOption.column"></m-s-search>
    </div>
    <avue-crud :option="{...notificationTemplateOption,menuWidth:250}"
               :data="tableData"
               @selection-change="v=>selection=v"
               @current-change="currentChange"
               @size-change="sizeChange"
               ref="crud"
               :page.sync="page">
      <template slot="menuLeft" slot-scope="{size}">
        <el-button :size="size" type="primary"
                   @click="addToTabsList('通知模板',{oid:-1},'notificationTemplateTemp','open')">
          新增
        </el-button>
      </template>

      <template slot="scheduleType" slot-scope="{row}">
        <div class="state-circle">
          <span :style="{background:row.scheduleType===0?'#E6A23C':'#67C23A'}"></span>
        </div>
      </template>

      <template slot="nameCn" slot-scope="{row}">
        <span class="column-btn"
              @click="addToTabsList(row.name+'通知模板',row,'notificationTemplateTemp','view')">
          {{ row.nameCn }}
        </span>
      </template>

      <template slot="menu" slot-scope="{row}">
        <el-button type="text" @click="dialog=true,dialogType={...row,type__:1}">测试定时通知</el-button>
        <el-button type="text" @click="dialog=true,dialogType={...row,type__:2}">测试通知</el-button>
        <el-button type="text" @click="addToTabsList(row.name+'通知模板',row,'notificationTemplateTemp','edit')">修改
        </el-button>
        <el-button type="text" @click="del(row)">删除</el-button>
      </template>
    </avue-crud>
    <ms-drawer :visible.sync="visible" id-key="oid" @refresh="getList" :tab-list.sync="tabsList"></ms-drawer>
    <el-dialog :visible.sync="dialog" title="参数配置" :modal-append-to-body="true" :append-to-body="true">
      <code-editor
          :mode="'json'"
          v-model="json"
          ref="ecEditor"
      ></code-editor>
      <div slot="footer" style="text-align: right">
        <el-button size="small" type="primary" @click="confirmStart">确定</el-button>
        <el-button size="small" @click="dialog=false">取消</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import MSSearch from "@/DMDComponents/MSSearch.vue";
import * as temp from "@/api/notification/template"
import CodeEditor from "@/components/code-editor/index.vue";

export default {
  name: "notificationTemplate",
  components: {CodeEditor, MSSearch},
  inject: ["notificationTemplateOption"],
  data() {
    return {
      tableData: [],
      selection: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      queryForm: {},

      tabsList: [],
      visible: false,

      dialog: false,
      json: "",
      // 1 测试定时通知 2 测试通知
      dialogType: 1,
    }
  },
  methods: {
    __refreshTable(){
      this.$refs["crud"].refreshTable();
    },
    confirmStart() {
      if (this.isJSON(this.json) || this.json === "") {
        let {type__, name} = this.dialogType;
        let methods = type__ === 1 ? "start" : "test";
        temp[methods]({templateName: name, templateVariables: this.json === "" ? "{}" : this.json}).then(() => {
          this.$message.success("通知成功");
          this.dialog = false;
          this.json = "";
        })
      } else {
        this.$message.warning("请输入正确的json");
      }
    },
    // 向抽屉中添加tab页 根据 oid 去重
    addToTabsList(title, row, component, type) {
      let ids = this.tabsList.map(item => (item.row.oid + "-" + item.component));
      if (!ids.includes((row.oid + "-" + component))) {
        this.tabsList.push({title, row, component, type})
      }
      this.visible = true;
    },
    getList() {
      temp.list({
        ...this.queryForm, ...{
          pageSize: this.page.pageSize,
          currentPage: this.page.currentPage
        }
      }).then(res => {
        let data = res.data.data;
        this.tableData = data.list;
        this.page.total = data.totalRows;
      })
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getList();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getList();
    },
    del(row) {
      this.$confirm("是否删除?").then(() => {
        temp.del({oid: row.oid}).then(() => {
          this.$message.success("删除成功");
          this.getList();
        })
      })
    }
  },
  mounted() {
    this.getList();
  }
}
</script>

<style scoped lang="scss">
.state-circle {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;

  > span {
    margin: auto;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 100%;
  }
}
</style>
